<template>
  <div>
    <el-dialog
        title="答题详情"
        :visible.sync="visible"
        width="80%"
        :before-close="handleClose">
        <div class="flex between">
            <div style="flex: 5;">
                <h1 style="text-align: center;font-size: 22px;" class="black bold">{{ paper.name }}</h1>
                <ul class="flex around item-center" style="margin: 20px 0;">
                    <li> <span style="margin-right: 5px;">考试题数：</span> <span>{{ testList.length + '道' }}</span> </li>
                    <li> <span style="margin-right: 5px;">考试时间：</span> <span>{{ paper.duration + '分钟' }}</span> </li>
                    <li> <span style="margin-right: 5px;">满分：</span> <span>{{ (testList.length * 5) + '分' }}</span> </li>
                    <li> <span style="margin-right: 5px;">及格分：</span> <span>{{ paper.comply_line + '分' }}</span> </li>
                </ul>
                <div class="content" style="padding: 0 30px; height: 60vh; overflow-y: auto;">
                    <ul>
                        <li v-for="(item, i) in testList" :key="item.id">
                            <Exercise :question="item" :total="testList.length" :current="i + 1" />
                        </li>
                    </ul>
                </div>
            </div>
            <div style="flex: 2;">
                <h1 style="text-align: center; font-size: 22px;">考试结果</h1>
                <ul>
                    <li style="margin: 20px 0; text-align: center;"> <span style="margin-right: 5px;">考试姓名：</span> <span>{{ uanswer.user_name }}</span> </li>
                    <li style="margin: 20px 0; text-align: center;"> <span style="margin-right: 5px;">总得分：</span> <span>{{ uscore }}</span> </li>
                    <li style="margin: 20px 0; text-align: center;"> <span style="margin-right: 5px;">是否及格：</span> <span>{{ uscore }}</span> </li>
                    <li style="margin: 20px 0; text-align: center;"> <span style="margin-right: 5px;">交卷时间：</span> <span>{{ paper.end_time }}</span> </li>
                </ul>
                <div class="items">
                    <ul class="flex">
                        <li :class="[
                            currentNum == i + 1 && 'current',
                            item.answer ? ( item.answer == item.question_answer ? 'rightli' : 'errorli' ) : ''
                        ]" 
                            @click="changeQuestion(i)"
                            v-for="(item, i) in testList" :key="item.id">
                            {{ i + 1 }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="visible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import Exercise from '@/components/Exercise'
export default {
    components: {
        Exercise
    },
    props: {
        testList: {
            type: Array,
            default: true,
            default: () => {
                return []
            }
        },
        uanswer: {
            type: Object,
            default: true,
            default: () => {
                return {}
            }
        },
        paper: {
            type: Object,
            default: true,
            default: () => {
                return {}
            }
        },
    },
    data() {
        return {
            visible: true,
            currentNum: 1,
            question: {}
        }
    },
    computed: {
        uscore() {
            return '0分'
        }
    },
    methods: {
        changeQuestion(i) {
            this.question = this.testList[i]
            this.currentNum = i + 1
        },
        handleClose(done) {
            done();
        }
    }
}
</script>

<style lang="scss" scoped>
.rightli {
    background-color: skyblue !important;
    color: #fff !important;
}
.errorli {
    background-color: rgba($color: #ff0000, $alpha: .7) !important;
    color: #fff !important;
}
.current {
    border: 1px solid red !important;
}
.items {
    >ul {
        flex-wrap: wrap;
        padding: 0 20px;
        li {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 0 15px 15px 0;
            border: 1px solid #ccc;
            cursor: pointer;
        }
    }
    
}
</style>